<template>
	<!-- 优惠券组件 -->
	<view class="coupon img-size-repeat flex-center-between" v-if="alldata">
		<view class="left">
			<view class="coupon-text flex-center">
				<view class="text-money fontb">{{ alldata.amount }}元</view>
				<view :class="[ alldata.useType ? 'flex-column-between' : 'flex-center' ]">
					<view class="font32 color333">{{ alldata.note }}</view>
					<view class="font26 color333">{{ alldata.useType }}</view>
				</view>
			</view>
			<view class="time font24 color666">{{ alldata.startTime }} - {{ alldata.endTime }}</view>
		</view>
		<view class="right flex-center">
			<button class="coupon-btn font28" :style="{'pointer-events': more}"
				:class="cls[alldata.couponType]" @tap="getCoupon">{{ text[alldata.couponType] }}</button>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api'
export default {
	data() {
		return {
			cls: [],
			text: [],
			more: 'auto', // 防止多次点击
		}
	},
	created() {
		if(this.type === 'use') {
			this.cls = ['btn-go', 'btn-over']
			this.text = ['使用', '已使用']
		}else {
			this.cls = ['btn-go', 'btn-over', 'btn-go', 'btn-over']
			this.text = ['立即领取', '已领取', '继续领取', '已抢光']
		}
	},
	methods: {
		// 获取优惠券
		async getCoupon() {
			// 购物车使用优惠券
			if(this.type === 'use') {
				this.$emit('change', {
					index: this.index,
					status: this.alldata.couponType ? 0 : 1,
					obj: this.alldata,
				})
				return 
			}
			// 立即领取、继续领取
			if(this.alldata.couponType === 0 || this.alldata.couponType === 2) {
				this.more = 'none'
				let res = await Api.apiCall('get', Api.coupon.getCoupon, { couponId: this.alldata.id }, true)
				if(res) {
					// 默认已抢光
					let status = 3
					if(res.code === 200) {// 已领取
						status = 2
					}
					// 不会不存在时
					if(res.code !== 500) {
						this.$emit('change', {
							index: this.index,
							status
						})
					}
					this.$api.msg(res.msg, 500)
					this.more = 'auto'
				}else {
					this.more = 'auto'
				}
			}
		},
	},
	// type：use是使用优惠券
	props: ['alldata', 'index', 'type']
}
</script>

<style lang="scss">
.coupon {
	padding: 24rpx 33rpx;
	margin-bottom: 20rpx;
	width: 710rpx;
	height: 234rpx;
	background-image: url('/static/image/selectcoupon.png');
	.left {
		padding: 50rpx 0 14rpx;
		.coupon-text {
			height: 70rpx;
			.text-money {
				width: 196rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 60rpx;
				color: #C53624;
			}
		}
		.time {
			margin-top: 28rpx;
			padding-left: 53rpx;
		}
	}
	.right {
		height: 100%;
		.coupon-btn {
			padding: 0;
			width: 134rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 31rpx;
			letter-spacing: 0.82rpx;
			&::after {
				border: 0;
			}
		}
		.btn-go {
			color: #7A3F00;
			background:linear-gradient(180deg,rgba(255,222,176,1) 0%,rgba(238,177,113,1) 100%);
			box-shadow: inset 0px 1px 1px 0px rgba(255,254,254,0.5);
		}
		.btn-over {
			color: #666;
			background-color: #D8D8D8;
		}
	}
}
</style>
